<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="vue2610.js" ></script>
</head>
<body>
<div id="app">
    <p>系统过滤器</p>
<!--    json 是系统过滤器,将object转换为json形式 -->
    {{list | json}}
    <hr>
<!--    自定义私有的过滤器: 在vue对象内部定义的过滤器,作用域为vue对象监管的范围 -->
    <p>私有过滤器</p>
    <div class="app">
        {{my_time}}
        <p>
            {{my_time | time_filter}}
        </p>
    </div>


    
</div>
<!--    全局过滤器 : -->
<div id="global">
    <p>
        全局过滤器
    </p>
    {{my_time | dateFmt}}
</div>
</body>


<script>
//<!--    定义全局过滤器 -->
    Vue.filter('dateFmt',function (input) {
        var reslut = ''
        var year = input.getFullYear()
        var month = input.getMonth()+ 1
        var day = input.getDate()
        reslut = year +'-' + month +'-'+ day
        return reslut
    });

    let vm0 = new Vue({
        el:'#global',
        data:{
            list:[{uname:'alex'},{uname:'jobs'}],
            my_time:new Date()

        }
    });

    let vm = new Vue({
        el:'#app',
        data:{
            list:[{uname:'alex'},{uname:'jobs'}],
            my_time:new Date()
        },
        // 内部自定义的过滤器
        filters:{
            time_filter:function (input) {   /** input的值取决 | 左边传的内容 */
                var reslut = ''
                var year = input.getFullYear()
                var month = input.getMonth()+ 1
                var day = input.getDate()
                reslut = year +'-' + month +'-'+ day
                return reslut
            }
        }
    });
</script>
</html>